import { FC, useState, useEffect } from 'react';
import {
  Space,
  Form,
  Input,
  Button,
  Checkbox,
  Table,
  Card,
  Popconfirm,
  Pagination,
} from 'antd';

const confirm = (record: any) => {
  // 确认删除
  console.log(record);
};

// 表格的列信息
const columns = [
  // {
  //   title: '姓名',
  //   dataIndex: 'name',
  //   // 自定义渲染
  //   // 第一个参数是text，是本来要渲染的那一个字符串
  //   render(text: string) {
  //     return <span style={{ color: 'red' }}>{text}</span>;
  //   },
  // },
  // {
  //   title: '年龄',
  //   dataIndex: 'age',
  // },
  {
    title: '姓名、年龄',
    render(text: string, record: any) {
      return (
        <span>
          {record.name}
          {record.age}岁
        </span>
      );
    },
  },
  {
    title: '爱好',
    dataIndex: 'likes',
    render(text: string[]) {
      return <span>{text.join(',')}</span>;
    },
  },
  {
    title: '住址',
    dataIndex: 'address',
  },
  {
    title: '操作',
    // render的第二个参数是record，表示的是整一条数据
    render(text: string, record: any) {
      return (
        <Popconfirm
          title="Are you sure to delete this task?"
          onConfirm={() => confirm(record)}
          okText="Yes"
          cancelText="No"
        >
          <Button>Delete</Button>
        </Popconfirm>
      );
    },
  },
];

const TableBasic: FC = () => {
  const [dataSource, set_DataSource] = useState<any>([]);

  useEffect(() => {
    setTimeout(() => {
      set_DataSource([
        {
          key: '1',
          name: '胡彦斌',
          age: 32,
          likes: [299, 399],
          address: '西湖区湖底公园1号',
        },
        {
          key: '2',
          name: '胡彦祖',
          age: 42,
          likes: [399, 699],
          address: '西湖区湖底公园1号',
        },
        {
          key: '3',
          name: '胡彦祖3',
          age: 42,
          likes: [399, 699],
          address: '西湖区湖底公园1号',
        },
        {
          key: '4',
          name: '胡彦祖4',
          age: 42,
          likes: [399, 699],
          address: '西湖区湖底公园1号',
        },
        {
          key: '5',
          name: '胡彦祖5',
          age: 42,
          likes: [399, 699],
          address: '西湖区湖底公园1号',
        },
        {
          key: '6',
          name: '胡彦祖6',
          age: 42,
          likes: [399, 699],
          address: '西湖区湖底公园1号',
        },
        {
          key: '7',
          name: '胡彦祖7',
          age: 42,
          likes: [399, 699],
          address: '西湖区湖底公园1号',
        },
        {
          key: '8',
          name: '胡彦祖8',
          age: 42,
          likes: [399, 699],
          address: '西湖区湖底公园1号',
        },
        {
          key: '9',
          name: '胡彦祖9',
          age: 42,
          likes: [399, 699],
          address: '西湖区湖底公园1号',
        },
        {
          key: '10',
          name: '胡彦祖10',
          age: 42,
          likes: [399, 699],
          address: '西湖区湖底公园1号',
        },
      ]);
    }, 200);
  }, []);

  const onChange = (page: number, pageSize: number) => {
    console.log(page);
    console.log(pageSize);
  };

  return (
    <Space direction="vertical" style={{ display: 'flex' }}>
      <Card title="表格基础">
        {/* pagination={false}关闭表格自带的分页 */}
        <Table dataSource={dataSource} columns={columns} pagination={false} />
        <Pagination defaultCurrent={1} total={55} onChange={onChange} />
      </Card>
    </Space>
  );
};

export default TableBasic;
